<html>

<head>
    <meta charset="utf-8">
    <title>5种纯CSS状态切换按钮开关</title>
    <style type="text/css">
        html,
        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        h2 {
            color: #777;
        }
        
        h4 {
            color: #999;
        }
        
        .tgl {
            display: none;
        }
        
        .tgl,
        .tgl:after,
        .tgl:before,
        .tgl *,
        .tgl *:after,
        .tgl *:before,
        .tgl+.tgl-btn {
            box-sizing: border-box;
        }
        
        .tgl::-moz-selection,
        .tgl:after::-moz-selection,
        .tgl:before::-moz-selection,
        .tgl *::-moz-selection,
        .tgl *:after::-moz-selection,
        .tgl *:before::-moz-selection,
        .tgl+.tgl-btn::-moz-selection {
            background: none;
        }
        
        .tgl::selection,
        .tgl:after::selection,
        .tgl:before::selection,
        .tgl *::selection,
        .tgl *:after::selection,
        .tgl *:before::selection,
        .tgl+.tgl-btn::selection {
            background: none;
        }
        
        .tgl+.tgl-btn {
            outline: 0;
            display: block;
            width: 4em;
            height: 2em;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        .tgl+.tgl-btn:after,
        .tgl+.tgl-btn:before {
            position: relative;
            display: block;
            content: "";
            width: 50%;
            height: 100%;
        }
        
        .tgl+.tgl-btn:after {
            left: 0;
        }
        
        .tgl+.tgl-btn:before {
            display: none;
        }
        
        .tgl:checked+.tgl-btn:after {
            left: 50%;
        }
        
        .tgl-skewed+.tgl-btn {
            overflow: hidden;
            -webkit-transform: skew(-10deg);
            transform: skew(-10deg);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            background: #888;
        }
        
        .tgl-skewed+.tgl-btn:after,
        .tgl-skewed+.tgl-btn:before {
            -webkit-transform: skew(10deg);
            transform: skew(10deg);
            display: inline-block;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            width: 100%;
            text-align: center;
            position: absolute;
            line-height: 2em;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        }
        
        .tgl-skewed+.tgl-btn:after {
            left: 100%;
            content: attr(data-tg-on);
        }
        
        .tgl-skewed+.tgl-btn:before {
            left: 0;
            content: attr(data-tg-off);
        }
        
        .tgl-skewed+.tgl-btn:active {
            background: #888;
        }
        
        .tgl-skewed+.tgl-btn:active:before {
            left: -10%;
        }
        
        .tgl-skewed:checked+.tgl-btn {
            background: #86d993;
        }
        
        .tgl-skewed:checked+.tgl-btn:before {
            left: -100%;
        }
        
        .tgl-skewed:checked+.tgl-btn:after {
            left: 0;
        }
        
        .tgl-skewed:checked+.tgl-btn:active:after {
            left: 10%;
        }
    </style>

</head>

<body>
    <h2>5种纯CSS状态切换按钮开关</h2>




    <input class="tgl tgl-skewed" id="cb3" type="checkbox" />
    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb3"></label>
    <input class="tgl tgl-skewed" id="cb4" checked="true" type="checkbox" />
    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb4"></label>
    <input class="tgl tgl-skewed" id="cb5" unchecked type="checkbox" />
    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb5"></label>
    <input class="tgl tgl-skewed" id="cb6" type="checkbox" />
    <label class="tgl-btn" data-tg-off="关" data-tg-on="开" for="cb6"></label>



</body>

</html>